<template>
  <div>
    <div class="divBox">
      <!-- <el-select v-model="userFrom.dataFactoryId" placeholder="请选择" class="selWidth" clearable>
  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
  </el-option>
</el-select> -->
      <div class="search">
        <span>数据场：</span>
        <UserSearchable v-model="form.dataFactoryId" :type="'datafieldList'">
          <template #dropdownTitle>
            <span>数据场</span>
          </template>
          <template v-slot:dropdown="{ item }">
            <span>{{ item.name }}</span>
          </template>
        </UserSearchable>
        <el-button type="primary" icon="el-icon-search" @click="GetReportStatistics">搜索</el-button>
      </div>

      <el-row :gutter="20" class="baseInfo">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div>
                <span class="main_tit">资管余额当日增加</span>
              </div>
            </div>
            <div class="content">
              <span class="content-number spBlock my15">{{
                increaseBalance
              }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div>
                <span class="main_tit">资管余额当日减少</span>
              </div>
            </div>
            <div class="content">
              <span class="content-number spBlock my15">{{
                reduceBalance
              }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div>
                <span class="main_tit">资管余额</span>
              </div>
            </div>
            <div class="content">
              <span class="content-number spBlock my15">{{
                totalBalance
              }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import UserSearchable from "@/components/UserSearchable";

import { reportStatistics } from "@/api/dataField";
export default {
  data() {
    return {
      grid: {
        xl: 6,
        lg: 6,
        md: 12,
        sm: 12,
        xs: 24,
      },
      form: {},
      increaseBalance: "", // 资管余额当日增加
      reduceBalance: "", // 资管余额当日减少
      totalBalance: "", // 资管余额
    };
  },
  components: {
    UserSearchable,
  },
  mounted() {
    this.GetReportStatistics();
  },
  methods: {
    GetReportStatistics() {
      reportStatistics({ dataFactoryId: this.form.dataFactoryId })
        .then((res) => {
          console.log("数据统计", res);
          this.increaseBalance = res.increaseBalance;
          this.reduceBalance = res.reduceBalance;
          this.totalBalance = res.totalBalance;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  margin: 20px 0;
  span{
    font-size: 14px;
    margin-right: 10px;
  }
  .el-button{
    margin-left:10px;
  }
}
.ivu-mb {
  margin-bottom: 20px;
}

.main_tit {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.main_badge {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-right: 10px;
  background: #2c90ff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.my15 {
  margin: 15px 0 15px;
}

.align-center {
  align-items: center;
}

.baseInfo {
  ::v-deep .el-card__header {
    padding: 15px 20px !important;
  }
}

.content {
  &-number {
    font-size: 30px;
    font-weight: 600;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #333;
  }
}
</style>
